<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>八里沟生态平台</title>
<meta name="keywords" content="">
<meta name="description" content="">
<script src="./lib/jquery.min.js"></script>
<script src="./lib/lodash.min.js"></script>
<script src="./lib/echarts.min.js"></script>
<script src="./lib/soda.js"></script>
    <script src="./js/comon.js"></script>
<link rel="stylesheet" type="text/css" href="./css/common.css">
<link rel="stylesheet" type="text/css" href="./css/main.css">
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=DvG5p5CZvkrtjRGDdGmaGX3ZfqYWvt9X"></script>
</head>
<body>
<div class="pagemain page1">
    <div class="center-main">
        <div class="page-top-tab-nav">
            <ul>
                <li class="current"><a href="keliu-reli.html">景区热力图</a></li>
                <li><a href="keliu-yuce.html">客流预测分析</a></li>
                <li><a href="keliu-jiedai.html">客流接待同比</a></li>
                <li><a href="keliu-cheliu.html">车流&购票时段分析</a></li>
            </ul>
        </div>
        <div class="page-left">
            <!--实时在园人数-->
            <div class="online-box">
                <div class="text"> 实时在园人数</div>
                <div class="num">
                    <div class="am_num">
                        <div id="total">
                             <span class="dn"><i style="background-position: 0px 0px; "></i>
                                 <i style="background-position: 0px 0px;"></i></span>
                            <span class="t_num t_num1"></span>
                        </div>
                        <!-- <div id="total">
                            <span class="dn" style="display: inline;"><i style="background-position: 0px 0px; "></i>
                                <i style="background-position: 0px 0px;"></i></span>
                           <span class="t_num t_num1"><i style="background-position: 0px -70px;"></i><i style="background-position: 0px -140px;"></i><i style="background-position: 0px -140px;"></i></span>
                       </div> -->
                    </div>
                </div>
                <div class="chart-name">
                    <ul>
                        <li>景区客流饱和度</li>
                        <li>今日接待游客</li>
                        <li>去年同期接待游客</li>
                        <!-- <li>二次返园率</li> -->
                    </ul>
                </div>
                <div class="chartcon" id="passClassify">

                </div>
                <div class="total">
                    <div class="box numbox fl">
                        <span class="fl-month">本月累计：<i id="cumulative1">1</i><i id="cumulative1">5</i><i id="cumulative1">2</i><i id="cumulative1">8</i><i id="cumulative1">6</i></span>
                         <span>人</span>
                    </div>
                    <div class="box numbox fr">
                        <span class="fr-year">本年累计：<i id="cumulative1">9</i><i id="cumulative1">2</i><i id="cumulative1">8</i><i id="cumulative1">3</i><i id="cumulative1">7</i><i id="cumulative1">0</i></span>

                        <span>人</span>
                    </div>
                </div>
            </div>
            <!--实时在园人数 end-->
            <!--当月客流量Top5-->
            <div class="customer">
               <ul>
                   <li>
                       <div class="name"><i>1</i> <span>08月03日</span></div>
                       <div class="vol"><span style="width: 50%"></span></div>
                       <div class="wea"><span>周末</span> <strong>晴转多云 23℃-30℃</strong></div>
                   </li>
                   <li>
                       <div class="name"><i>2</i> <span>08月03日</span></div>
                       <div class="vol"><span style="width: 40%"></span></div>
                       <div class="wea"><span>周末</span> <strong>晴转多云 23℃-30℃</strong></div>
                   </li>
                   <li>
                       <div class="name"><i>3</i> <span>08月03日</span></div>
                       <div class="vol"><span style="width: 45%"></span></div>
                       <div class="wea"><span>周末</span><strong>晴转多云 23℃-30℃</strong></div>
                   </li>
                   <li>
                       <div class="name"><i>4</i> <span>08月03日</span></div>
                       <div class="vol"><span style="width: 60%"></span></div>
                       <div class="wea"><span>国庆节</span> <strong>晴转多多云 23℃-30℃</strong></div>
                   </li>
                   <li>
                       <div class="name"><i>5</i> <span>08月03日</span></div>
                       <div class="vol"><span style="width:50%"></span></div>
                       <div class="wea"><span>周末</span> <strong>晴转多云 23℃-30℃</strong></div>
                   </li>
               </ul>
            </div>
            <!--当月客流量Top5 end-->

           <!-- 客流分时段-->
            <div class="cus-time">
                  <div class="chartcon" id="timeTrend"></div>
            </div>
            <!-- 客流分时段 end-->
        </div>
        <div class="page-right">
            <div class="bili"></div>
                <div class="top-time">2017-08-23 09:20:03</div>
            <div class="time-filter">
                <div class="name">时间：</div>
                <div class="inp"><input type="text" id="date1" autocomplete="off" readonly></div>
                <div class="name">粒度：</div>
                <div class="inp">
                    <select name="" id="interval">
                        <option value="5">5分钟</option>
                        <option value="10">10分钟</option>
                        <option value="30">30分钟</option>
                        <option value="60">60分钟</option>
                    </select>
                </div>
                <div class="btn" id="hotSearch">查看</div>
                <div class="btn btn2" id="refresh">暂停刷新</div>
            </div>
            <div class="map_wrap_div bmap-div" id="baidumap">
            </div>
            <div class="map_wrap_div bmap-sate satellite " id="satellite" style="left: -2000px">
            </div>
            <!-- <div class="mapchange">
                <li id="ms1" class="current">平面</li>
                <li id="ms2" >卫星</li>
            </div> -->
            <div class="hour">
                <div class="line" id="timeline">
                    <div class="wline"></div>
                    <div class="lis">
                        <li>00</li>
                        <li>01</li>
                        <li>02</li>
                        <li>03</li>
                        <li>04</li>
                        <li>05</li>
                        <li>06</li>
                        <li>07</li>
                        <li>08</li>
                        <li>09</li>
                        <li>10</li>
                        <li>11</li>
                        <li>12</li>
                        <li>13</li>
                        <li>14</li>
                        <li>15</li>
                        <li>16</li>
                        <li>17</li>
                        <li>18</li>
                        <li>19</li>
                        <li>20</li>
                        <li>21</li>
                        <li>22</li>
                        <li>23</li>
                    </div>
                    <div id="spotWrap">
                        <div class="tooltip tooltip-main top in dnnn" style=" margin-left: -24px;">
                            <div class="tooltip-arrow"></div>
                            <div class="tooltip-inner">00:00</div>
                        </div>
                        <div class="star"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
<script src="./lib/dyw.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
<script src="./lib/laydate/laydate.js"></script>
<script src="./lib/digitalScroll.js"></script>
<script src="./js/keliu_reli.js"></script>
<script src="./js/keliu_reli_map.js"></script>
<script src="./lib/jQuery.toolTip.js"></script>
<!-- <script src="data/keliu_reli.json?callback=list"></script> -->
<script>
    // 滚动数字
    var sum = 75246;
    function show_num1(n) {
        sum++;
        var it = $(".t_num1 i");
        var len = String(n).length;
        if (it.length > len) {
                var long = it.length - (it.length - len) - 1;
                $(".t_num1 i:gt(" + (long) + ")").remove();
                console.log('多一位')
            }
        for (var i = 0; i < len; i++) {
            if (it.length <= i) {
                $(".t_num1").append("<i></i>");
            }
            var num = String(n).charAt(i);
            //根据数字图片的高度设置相应的值
            var y = -parseInt(num) * 70;
            var obj = $(".t_num1 i").eq(i);
            obj.animate({
                backgroundPosition: '(0 ' + String(y) + 'px)'
            }, 'slow', 'swing', function () {
            });
        }
        $("#total .dn").show();
        $("#cur_num").val(n);
    }
    show_num1(122)
    $(function () {
        /*      show_num1(sum)
              setInterval(function () {
                  show_num1(sum)
              }, 1000);*/
        // var timer = setInterval(function () {
        //     var now = utils.getNowFormatDate();
        //     $(".top-time").text(now)
        // }, 1000)
        var date1 = {
            elem: '#date1',
            format: 'yyyy-MM-dd',
            max: 0,
            min: "2019-09-15 00:00:00",
            choose: function (datas) {
                ticend.min = datas; //开始日选好后，重置结束日的最小日期
            }
        };
        laydate.render(date1)
    })

    
</script>


</body>
</html>
